<template>
  <div class="system-bg">
    <el-card class="user-card" shadow="hover">
      <div slot="header" class="card-header-horizontal">
        <div class="header-title">配偶管理</div>
        <div class="header-btn-group">
          <el-button class="add-btn" type="primary" icon="el-icon-plus" @click="showAddDialog">新增配偶</el-button>
        </div>
      </div>
      <el-form :inline="true" :model="searchForm" class="search-bar">
        <el-form-item label="姓名">
          <el-input v-model="searchForm.name" placeholder="输入姓名" size="small" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="searchForm.gender" placeholder="全部" size="small">
            <el-option label="全部" value="" />
            <el-option label="男" value="M" />
            <el-option label="女" value="F" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="全部" size="small">
            <el-option label="全部" value="" />
            <el-option label="在世" value="在世" />
            <el-option label="已故" value="已故" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table 
        :data="spouseList" 
        v-loading="loading"
        style="width:100%" 
        class="member-table" 
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="photo" label="照片" width="80">
          <template slot-scope="scope">
            <img v-if="scope.row.photo" :src="getImageUrl(scope.row.photo)" style="width:50px;height:50px;border-radius:4px;object-fit:cover;cursor:pointer;" @click="previewImage(scope.row.photo)" />
            <span v-else style="color:#999;font-size:12px;">无照片</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="gender" label="性别" width="60">
          <template slot-scope="scope">
            {{ scope.row.gender === 'M' ? '男' : (scope.row.gender === 'F' ? '女' : '-') }}
          </template>
        </el-table-column>
        <el-table-column prop="birthDate" label="出生日期" width="120" />
        <el-table-column prop="deathDate" label="死亡日期" width="120" />
        <!-- <el-table-column label="籍贯" width="200">
          <template slot-scope="scope">
            {{ scope.row.nativeProvinceName }} {{ scope.row.nativeCityName }} {{ scope.row.nativeCountyName }}
          </template>
        </el-table-column> -->
        <el-table-column prop="currentAddress" label="现居地址" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '在世' ? 'success' : 'info'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="contact" label="联系方式" width="120" />
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <div class="action-btn-group">
              <el-button size="mini" class="edit-btn" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" class="delete-btn" @click="handleDelete(scope.row)">删除</el-button>
              <el-button size="mini" class="detail-btn" @click="handleView(scope.row)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="pagination.total"
        :page-size="pagination.size"
        :current-page="pagination.current"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, prev, pager, next, jumper, ->, sizes"
        :page-sizes="[10, 20, 50, 100]"
        class="member-pagination"
      />
    </el-card>

    <!-- 添加/编辑对话框 -->
    <el-dialog 
      :title="dialogTitle" 
      :visible.sync="dialogVisible" 
      class="fade-dialog custom-dialog" 
      :close-on-click-modal="false" 
      width="800px"
      @close="handleDialogClose"
    >
      <el-form
        :model="spouseForm"
        :rules="spouseRules"
        ref="spouseForm"
        label-width="90px"
        class="dialog-form"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="照片" class="nowrap-label">
              <div class="photo-upload-container">
                <el-upload
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="handlePhotoSuccess"
                  :before-upload="beforePhotoUpload"
                  :on-error="handlePhotoError"
                  :headers="uploadHeaders"
                  accept="image/*"
                  class="photo-upload">
                  <img v-if="spouseForm.photo" :src="getImageUrl(spouseForm.photo)" class="photo-preview" />
                  <i v-else class="el-icon-plus photo-uploader-icon"></i>
                </el-upload>
                <div v-if="spouseForm.photo" class="photo-actions">
                  <el-button size="mini" type="danger" @click="removePhoto">删除照片</el-button>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="spouseForm.name" placeholder="请输入配偶姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="spouseForm.gender">
                    <el-radio label="M">男</el-radio>
                    <el-radio label="F">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birthDate">
                  <el-date-picker
                    v-model="spouseForm.birthDate"
                    type="date"
                    placeholder="选择出生日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="死亡日期" prop="deathDate">
                  <el-date-picker
                    v-model="spouseForm.deathDate"
                    type="date"
                    placeholder="选择死亡日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="16">
              <el-col :span="24">
                <el-form-item label="籍贯" prop="nativePlace">
                  <el-cascader
                    v-model="regionCascaderValue"
                    :options="regionOptions"
                    :props="regionProps"
                    placeholder="请选择籍贯"
                    style="width: 100%"
                    @change="onRegionCascaderChange"
                    clearable
                    :load-data="loadRegionNode"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="联系方式" prop="contact">
                  <el-input v-model="spouseForm.contact" placeholder="请输入联系方式" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="status">
                  <el-radio-group v-model="spouseForm.status">
                    <el-radio label="在世">在世</el-radio>
                    <el-radio label="已故">已故</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="16">
              <el-col :span="24">
                <el-form-item label="现居地址" prop="currentAddress">
                  <el-input v-model="spouseForm.currentAddress" placeholder="请输入现居地址" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="16">
              <el-col :span="24">
                <el-form-item label="生平事迹" prop="story" class="nowrap-label">
                  <el-input
                    type="textarea"
                    v-model="spouseForm.story"
                    placeholder="请输入生平事迹"
                    :rows="3"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog>

        <!-- 查看详情对话框 -->
    <el-dialog
      title="配偶信息详情"
      :visible.sync="viewDialogVisible"
      class="fade-dialog custom-dialog"
      :close-on-click-modal="false"
      width="700px"
    >
      <div class="spouse-detail-container">
        <!-- 照片展示区域 -->
        <div class="photo-display-section">
          <div class="photo-label">照片</div>
          <div class="photo-display">
            <img v-if="currentSpouse.photo" :src="getImageUrl(currentSpouse.photo)" class="detail-photo" @click="previewImage(currentSpouse.photo)" />
            <div v-else class="no-photo">
              <i class="el-icon-picture-outline"></i>
              <span>暂无照片</span>
            </div>
          </div>
        </div>
        
        <!-- 信息展示区域 -->
        <div class="info-display-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="姓名">{{ currentSpouse.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">
              <el-tag :type="currentSpouse.gender === 'M' ? 'primary' : 'danger'">
                {{ currentSpouse.gender === 'M' ? '男' : '女' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ currentSpouse.birthDate }}</el-descriptions-item>
            <el-descriptions-item label="死亡日期">{{ currentSpouse.deathDate }}</el-descriptions-item>
            <el-descriptions-item label="籍贯">{{ currentSpouse.nativeProvinceName }} {{ currentSpouse.nativeCityName }} {{ currentSpouse.nativeCountyName }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ currentSpouse.contact }}</el-descriptions-item>
            <el-descriptions-item label="现居地址" :span="2">{{ currentSpouse.currentAddress }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="currentSpouse.status === '在世' ? 'success' : 'info'">
                {{ currentSpouse.status }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="生平事迹" :span="2">{{ currentSpouse.story }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSpouseList, getSpouseById, createSpouse, updateSpouse, deleteSpouse, searchSpouseByName, getSpouseByGender, getSpouseByStatus } from '@/api/spouse'
import { getProvinces, getCities, getCounties, getTowns } from '@/api/region'

export default {
  name: 'SpouseManagement',
  data() {
    return {
      loading: false,
      submitLoading: false,
      dialogVisible: false,
      viewDialogVisible: false,
      isEdit: false,
      dialogTitle: '',
      spouseList: [],
      currentSpouse: {},
      searchForm: {
        name: '',
        gender: '',
        status: ''
      },
      spouseForm: {
        id: null,
        name: '',
        gender: 'F',
        birthDate: '',
        deathDate: '',
        nativePlace: '',
        nativeProvinceCode: '',
        nativeCityCode: '',
        nativeCountyCode: '',
        nativeTownCode: '',
        currentAddress: '',
        contact: '',
        story: '',
        status: '在世',
        photo: ''
      },
      spouseRules: {
        name: [
          { required: true, message: '请输入配偶姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ]
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      regionCascaderValue: [],
      regionOptions: [],
      regionProps: {
        lazy: true,
        lazyLoad: this.loadRegionNode,
        value: 'value',
        label: 'label',
        children: 'children',
        emitPath: true,
        checkStrictly: false
      },
      uploadUrl: '/api/v1/upload/spouse-photo',
      uploadHeaders: { 'Authorization': 'Bearer ' + (localStorage.getItem('token') || '') }
    }
  },
  mounted() {
    this.loadSpouseList()
    this.loadRegionOptions()
  },
  methods: {
    // 加载配偶列表
    async loadSpouseList() {
      this.loading = true
      try {
        let response
        
        if (this.searchForm.name) {
          response = await searchSpouseByName(this.searchForm.name)
          this.spouseList = response || []
          this.pagination.total = this.spouseList.length
        } else if (this.searchForm.gender) {
          response = await getSpouseByGender(this.searchForm.gender)
          this.spouseList = response || []
          this.pagination.total = this.spouseList.length
        } else if (this.searchForm.status) {
          response = await getSpouseByStatus(this.searchForm.status)
          this.spouseList = response || []
          this.pagination.total = this.spouseList.length
        } else {
          // 默认加载所有配偶信息
          const params = {
            page: this.pagination.current,
            size: this.pagination.size
          }
          
          try {
            response = await getSpouseList(params)
            if (response) {
              this.spouseList = response || []
              // 由于后端返回的是List而不是分页对象，这里暂时使用列表长度作为总数
              this.pagination.total = this.spouseList.length
            } else {
              this.spouseList = []
              this.pagination.total = 0
            }
          } catch (error) {
            if (error.message === 'TOKEN_REFRESHED') {
              console.log('检测到token已刷新，重新发起请求')
              // token已刷新，重新发起请求
              response = await getSpouseList(params)
              if (response) {
                this.spouseList = response || []
                this.pagination.total = this.spouseList.length
              } else {
                this.spouseList = []
                this.pagination.total = 0
              }
            } else {
              throw error
            }
          }
        }
        
        console.log('加载的配偶列表:', this.spouseList);
      } catch (error) {
        this.$message.error('加载配偶信息失败')
        console.error(error)
        this.spouseList = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadSpouseList()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        name: '',
        gender: '',
        status: ''
      }
      this.pagination.current = 1
      this.loadSpouseList()
    },

    // 显示添加对话框
    showAddDialog() {
      this.isEdit = false
      this.dialogTitle = '新增配偶'
      this.spouseForm = {
        name: '',
        gender: 'F',
        birthDate: '',
        deathDate: '',
        nativePlace: '',
        nativeProvinceCode: '',
        nativeCityCode: '',
        nativeCountyCode: '',
        nativeTownCode: '',
        currentAddress: '',
        contact: '',
        story: '',
        status: '在世',
        photo: ''
      }
      this.regionCascaderValue = []
      this.dialogVisible = true
    },

    // 编辑
    handleEdit(row) {
      this.isEdit = true
      this.dialogTitle = '编辑配偶'
      this.spouseForm = { ...row }
      this.regionCascaderValue = [
        this.spouseForm.nativeProvinceCode,
        this.spouseForm.nativeCityCode,
        this.spouseForm.nativeCountyCode,
        this.spouseForm.nativeTownCode
      ].filter(Boolean)
      this.dialogVisible = true
    },

    // 查看详情
    handleView(row) {
      this.currentSpouse = { ...row }
      this.viewDialogVisible = true
    },

    // 删除
    async handleDelete(row) {
      try {
        await this.$confirm('确定要删除这个配偶信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await deleteSpouse(row.id)
        this.$message.success('删除成功')
        this.loadSpouseList()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败')
          console.error(error)
        }
      }
    },

    // 提交表单
    async handleSubmit() {
      try {
        await this.$refs.spouseForm.validate()
        this.submitLoading = true
        
        console.log('提交的配偶数据:', this.spouseForm);
        
        if (this.isEdit) {
          await updateSpouse(this.spouseForm.id, this.spouseForm)
          this.$message.success('更新成功')
        } else {
          await createSpouse(this.spouseForm)
          this.$message.success('添加成功')
        }
        
        this.dialogVisible = false
        this.loadSpouseList()
      } catch (error) {
        this.$message.error(this.isEdit ? '更新失败' : '添加失败')
        console.error(error)
      } finally {
        this.submitLoading = false
      }
    },

    // 对话框关闭
    handleDialogClose() {
      this.$refs.spouseForm && this.$refs.spouseForm.resetFields()
    },

    // 选择变化
    handleSelectionChange(selection) {
      this.selectedSpouses = selection
    },

    // 分页大小变化
    handleSizeChange(size) {
      this.pagination.size = size
      this.pagination.current = 1
      this.loadSpouseList()
    },

    // 当前页变化
    handleCurrentChange(current) {
      this.pagination.current = current
      this.loadSpouseList()
    },

    // 加载地区选项
    async loadRegionOptions() {
      // 使用懒加载，不需要预加载所有数据
      this.regionOptions = []
    },
    
    // 懒加载地区数据
    async loadRegionNode(node, resolve) {
      const { level, value } = node
      
      try {
        let children = []
        
        if (level === 0) {
          // 加载省份
          const provinces = await getProvinces()
          children = provinces.map(province => ({
            value: province.code,
            label: province.name,
            leaf: false
          }))
        } else if (level === 1) {
          // 加载城市
          const cities = await getCities(value)
          children = cities.map(city => ({
            value: city.code,
            label: city.name,
            leaf: false
          }))
        } else if (level === 2) {
          // 加载区县
          const counties = await getCounties(value)
          children = counties.map(county => ({
            value: county.code,
            label: county.name,
            leaf: false
          }))
        } else if (level === 3) {
          // 加载镇/街道
          const towns = await getTowns(value)
          children = towns.map(town => ({
            value: town.code,
            label: town.name,
            leaf: true
          }))
        }
        
        resolve(children)
      } catch (error) {
        console.error('加载地区数据失败:', error)
        resolve([])
      }
    },

    // 地区选择器变化
    onRegionCascaderChange(value) {
      this.spouseForm.nativeProvinceCode = value[0] || ''
      this.spouseForm.nativeCityCode = value[1] || ''
      this.spouseForm.nativeCountyCode = value[2] || ''
      this.spouseForm.nativeTownCode = value[3] || ''
    },

    // 预览图片
    previewImage(url) {
      if (url) {
        const imageUrl = this.getImageUrl(url);
        this.$alert(`<img src="${imageUrl}" style="max-width:100%;max-height:400px;" />`, '照片预览', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '关闭'
        });
      }
    },

    // 获取图片URL
    getImageUrl(url) {
      if (!url) return '';
      if (url.startsWith('http')) {
        return url;
      }
      return url; // Use relative path since proxy handles it
    },

    // 照片上传成功
    handlePhotoSuccess(response, file, fileList) {
      console.log('照片上传响应:', response);
      if (response.code === 0) {
        this.spouseForm.photo = response.data;
        console.log('设置照片路径:', this.spouseForm.photo);
        this.$message.success('照片上传成功');
      } else {
        this.$message.error(response.msg || '照片上传失败');
      }
    },

    // 照片上传前校验
    beforePhotoUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 照片上传失败
    handlePhotoError(err, file, fileList) {
      this.$message.error('图片上传失败')
      console.error(err)
    },

    // 删除照片
    removePhoto() {
      this.spouseForm.photo = ''
    }
  }
}
</script>

<style scoped>
.system-bg {
  min-height: 80vh;
  background: linear-gradient(135deg, #f4f6fa 60%, #e0e7ff 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 0;
  animation: fadeIn 0.8s;
}

.user-card {
  width: 1100px;
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  background: rgba(255,255,255,0.95);
  transition: box-shadow 0.3s;
}

.card-header-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}

.header-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

.header-btn-group {
  display: flex;
  align-items: center;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.header-btn-group .el-button {
  margin-right: 8px;
  height: 34px;
  font-size: 15px;
  padding: 0 18px;
  display: flex;
  align-items: center;
}

.header-btn-group .el-button:last-child {
  margin-right: 0;
}

.add-btn {
  background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  border: none;
  color: #fff;
  font-weight: bold;
}

.add-btn:hover {
  background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%);
}

.search-bar {
  margin-bottom: 20px;
  padding: 20px;
  background: transparent;
  border-radius: 8px;
  border: none;
}

.member-table {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}

.member-table ::v-deep .el-table__row:hover {
  background: #f0f7ff !important;
  transition: background 0.2s;
}

.edit-btn {
  background: #fff;
  border: 1px solid #6a82fb;
  color: #6a82fb;
  transition: all 0.2s;
}

.edit-btn:hover {
  background: #6a82fb;
  color: #fff;
}

.delete-btn {
  background: #fff;
  border: 1px solid #fc5c7d;
  color: #fc5c7d;
  transition: all 0.2s;
}

.delete-btn:hover {
  background: #fc5c7d;
  color: #fff;
}

.detail-btn {
  background: #fff;
  border: 1px solid #909399;
  color: #606266;
  border-radius: 6px;
  transition: all 0.2s;
}

.detail-btn:hover {
  background: #f4f6fa;
  color: #409EFF;
  border-color: #409EFF;
}

.action-btn-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.action-btn-group .el-button {
  min-width: 55px;
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  box-sizing: border-box;
}

.action-btn-group .el-button:last-child {
  margin-right: 0;
}

.member-pagination {
  margin-top: 18px;
  text-align: right;
}

.member-pagination ::v-deep .el-pager li {
  border-radius: 6px;
  transition: background 0.2s;
}

.member-pagination ::v-deep .el-pager li.active {
  background: #6a82fb;
  color: #fff;
}

.fade-dialog ::v-deep .el-dialog__wrapper {
  animation: fadeIn 0.4s;
}

.custom-dialog ::v-deep .el-dialog {
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  background: #fafdff;
  padding-bottom: 0;
}

.dialog-form {
  padding: 12px 0 0 0;
}

.dialog-form ::v-deep .el-form-item {
  margin-bottom: 22px;
}

.dialog-footer {
  text-align: right;
  padding: 8px 0 8px 0;
}

.dialog-footer .el-button {
  min-width: 80px;
  border-radius: 6px;
  font-weight: 500;
  margin-left: 8px;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  border: none;
}

.dialog-footer .el-button--primary:hover {
  background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%);
}

/* 照片上传样式 */
.photo-upload-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.photo-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-upload:hover {
  border-color: #409EFF;
}

.photo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.photo-preview {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: cover;
}

.photo-actions {
  margin-top: 8px;
}

.nowrap-label ::v-deep .el-form-item__label {
  white-space: nowrap;
}

/* 修复状态单选按钮布局 */
.dialog-form ::v-deep .el-form-item__content .el-radio-group {
  display: flex;
  align-items: center;
}

.dialog-form ::v-deep .el-form-item__content .el-radio-group .el-radio {
  margin-right: 16px;
  display: flex;
  align-items: center;
  line-height: 1;
  height: 32px;
}

.dialog-form ::v-deep .el-form-item__content .el-radio-group .el-radio:last-child {
  margin-right: 0;
}

.dialog-form ::v-deep .el-form-item__content .el-radio-group .el-radio__label {
  margin-left: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 32px;
}

.dialog-form ::v-deep .el-form-item__content .el-radio-group .el-radio__input {
  display: flex;
  align-items: center;
  line-height: 1;
  height: 32px;
}

.dialog-form ::v-deep .el-form-item__content .el-radio-group .el-radio__inner {
  margin: 0;
  vertical-align: middle;
}

.dialog-form ::v-deep .el-form-item__content .el-radio-group .el-radio__input.is-checked .el-radio__inner {
  vertical-align: middle;
}

/* 详情页照片展示样式 */
.spouse-detail-container {
  display: flex;
  gap: 24px;
}

.photo-display-section {
  flex-shrink: 0;
  width: 200px;
}

.photo-label {
  font-weight: 600;
  color: #606266;
  margin-bottom: 12px;
  font-size: 14px;
}

.photo-display {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.detail-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-photo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.no-photo i {
  font-size: 48px;
  margin-bottom: 8px;
  color: #c0c4cc;
}

.info-display-section {
  flex: 1;
}

.info-display-section ::v-deep .el-descriptions {
  margin: 0;
}

.info-display-section ::v-deep .el-descriptions__body {
  background: #fff;
}

.info-display-section ::v-deep .el-descriptions__label {
  font-weight: 600;
  color: #606266;
}

.info-display-section ::v-deep .el-descriptions__content {
  color: #303133;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .spouse-detail-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .photo-display-section {
    width: 100%;
  }
  
  .photo-display {
    min-height: 150px;
  }
  
  .detail-photo {
    width: 120px;
    height: 120px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 